<template>
  <!-- 优惠券管理 -->
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :model="form" label-width="150px" :inline="true">
        <el-row>
          <el-col :span="8">
            <el-form-item label="优惠券名称">
              <el-input v-model="form.type_name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配置日期" width="236">
              <el-date-picker
                v-model="time"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <!-- <el-button type="primary" @click="handleExport">导出</el-button> -->
              <Exprotcomponent :params="form" url="admin/ticket_export" type="php"></Exprotcomponent>
              <el-button type="primary" @click="toRoutes('addCoupon')">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="listDiv" v-loading="tableLoading">
      <el-table ref="tableData" :data="tableData" style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="编号"
          width="50"
          align="center"
          :index="table_index"
        />
        <el-table-column label="优惠券名称" prop="type_name" align="center" width="150px" />
        <el-table-column label="优惠券类型" prop="realname" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.source | sourceType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用范围" prop="ticket_goods_count" align="center">
          <template slot-scope="scope">
            <div
              style="color: #409eef; cursor:pointer"
              @click="useRange(scope.row.id)"
            >{{scope.row.ticket_goods_count || 0}}</div>
          </template>
        </el-table-column>
        <el-table-column label="抵扣金额" prop="type_money" align="center" />
        <el-table-column label="发放数量" prop="ticket_middle_count" align="center">
          <template slot-scope="scope">
            <div
              style="color: #409eef; cursor:pointer"
              @click="handleNum(scope.row.id)"
            >{{scope.row.ticket_middle_count}}</div>
          </template>
        </el-table-column>
        <el-table-column label="发放方式" prop="send" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.send | sendType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="created_at" align="center" width="200px">
          <!-- <template slot-scope="scope">
            <span>{{(scope.row.created_at - 0 ) / 1000 | date(1)}}</span>
          </template>-->
        </el-table-column>
        <el-table-column label="操作下架" fixed="right" align="center" prop="is_out">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_out"
              @change="switchChange(scope.row.id)"
              :active-value="0"
              :inactive-value="1"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 使用范围弹窗 -->
    <el-dialog title="使用范围" :visible.sync="dialogFormVisible" width="60%" center>
      <div v-loading="tableLoading1">
        <el-table ref="tableData1" :data="tableData1" style="width: 100%" border>
          <el-table-column label="卡/券名称" prop="name" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.name || ''}}</span>
            </template>
          </el-table-column>
          <el-table-column label="零售价" prop="sale_price" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.sale_price || 0}}</span>
            </template>
          </el-table-column>
          <el-table-column label="购买有效期" align="center" width="180px">
            <template slot-scope="scope">
              {{scope.row.validity_start_time | dates}}~{{scope.row.validity_end_time | dates}}
              <!-- <span
                v-if="scope.row.validity_start_time && scope.row.validity_end_time"
              >{{(scope.row.validity_start_time - 0) * 1000 | date(1)}}~{{(scope.row.validity_end_time - 0) * 1000 | date(1)}}</span>-->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form1.page"
              :page-sizes="page_sizes1"
              :page-size="form1.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals1"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
            />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 发放数量 -->
    <el-dialog title="发放数量" :visible.sync="dialogNumVisible" width="60%" center>
      <div v-loading="tableLoading2">
        <el-table ref="tableData2" :data="tableData2" style="width: 100%" border>
          <el-table-column label="用户名" align="center">
            <template slot-scope="scope">{{scope.row.member.realname || scope.row.member.nickname}}</template>
          </el-table-column>
          <el-table-column label="手机号" prop="username" align="center">
            <template slot-scope="scope">{{scope.row.member.username}}</template>
          </el-table-column>
          <el-table-column label="优惠券状态" prop="is_use" align="center">
            <template slot-scope="scope">{{scope.row.is_use | statusType}}</template>
          </el-table-column>
          <el-table-column label="购买卡/券" align="center" width="150px">
            <template slot-scope="scope">
              <span v-if="scope.row.c2c_order">{{scope.row.c2c_order.order_item.goods_name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="购买日期" prop="pay_time" align="center">
            <!-- {{scope.row.pay_time | dates}} -->
            <template slot-scope="scope">
              <span v-if="scope.row.c2c_order">{{scope.row.c2c_order.pay_time | dates}}</span>
            </template>
          </el-table-column>
          <el-table-column label="有效日期" align="center" width="180px">
            <template slot-scope="scope">
              <span>{{scope.row.start_time | dates}}~{{scope.row.end_time | dates}}</span>
              <!-- <span>{{(scope.row.start_time - 0) *1000 | dates(1)}}-{{(scope.row.end_time - 0) * 1000 | dates(1)}}</span> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form2.page"
              :page-sizes="page_sizes2"
              :page-size="form2.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals2"
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { couponsList, useScope, getNum, isOn } from "@/api/quanMange";
// import commonFn from "@/utils/common";
import filter from "@/assets/filter";
export default {
  name: "Couponmanagement",
  data() {
    return {
      form: {
        type_name: "",
        created_at: "",
        page: 1,
        pagesize: 10
      },
      form1: {
        page: 1,
        pagesize: 10
      },
      page_sizes1: [10, 30, 50, 100],
      page_totals1: 0,
      page_sizes: [10, 30, 50, 100],
      page_totals: 0,
      tableData: [{}],
      tableLoading: true,
      dialogFormVisible: false,
      tableData1: [],
      tableLoading1: false,
      dialogNumVisible: false, //发放数量
      tableData2: [], //发放数量弹窗数据
      form2: {
        page: 1,
        pagesize: 10
      },
      time: null,
      page_sizes2: [10, 30, 50, 100],
      page_totals2: 0,
      tableLoading2: false
    };
  },
  watch: {
    time(val) {
      if (val) {
        this.form.created_at = val[0] + " - " + val[1];
      } else {
        this.form.created_at = "";
      }
    }
  },
  filters: {
    // 优惠券类型
    sourceType(opt) {
      if (opt) {
        return opt == 1
          ? "新人大礼包"
          : opt == 2
          ? "抵扣券"
          : opt == 3
          ? "体验券"
          : "";
      }
    },
    // 发放方式
    sendType(opt) {
      if (opt) {
        return opt == 1 ? "系统发送" : opt == 2 ? "领取" : "";
      }
    },
    // 优惠券状态
    statusType(opt) {
      return opt == 0 ? "未使用" : opt == 1 ? "已使用" : "";
    },
    // 时间戳转化
    dates(opt) {
      if (opt) {
        // yyyy-MM-dd hh:mm:ss
        return new Date(Number(opt) * 1000).format("yyyy-MM-dd");
      } else {
        return "--";
      }
    }
  },
  mounted() {
    this.getList(this.form);
  },
  methods: {
    //   路由跳转
    toRoutes(name) {
      let routes = { name };
      this.$router.push(routes);
    },
    // 编号
    table_index(index) {
      return (this.form.page - 1) * this.form.pagesize + index + 1;
    },
    async getList(opt) {
      let res = await couponsList(opt);
      if (res.data.code == 200) {
        this.tableLoading = false;
        this.tableData = res.data.data.data;
        this.page_totals = res.data.data.total;
      } else {
        this.tableLoading = false;
        this.$message({
          message: res.data.msg,
          type: "warning"
        });
      }
    },
    // 下架
    switchChange(id) {
      let data = { id };
      isOn(data).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    // 使用范围
    async useRange(id) {
      this.dialogFormVisible = true;
      let data = {
        id,
        page: this.form1.page,
        pagesize: this.form1.pagesize
      };
      this.handleUse(data);
    },
    async handleUse(data) {
      let res = await useScope(data);
      if (res.data.code == 200) {
        this.tableLoading1 = false;
        this.tableData1 = res.data.data.data;
        this.page_totals1 = res.data.data.total;
      }
    },
    async numList(data) {
      let res = await getNum(data);
      if (res.data.code == 200) {
        this.tableLoading2 = false;
        this.tableData2 = res.data.data.data;
        this.page_totals2 = res.data.data.total;
      } else {
        this.tableLoading = false;
        this.$message({
          message: res.data.msg,
          type: "warning"
        });
      }
    },
    // 发放数量
    handleNum(id) {
      this.dialogNumVisible = true;
      let data = {
        id,
        page: this.form2.page,
        pagesize: this.form2.pagesize
      };
      this.numList(data);
    },
    //   查询
    handleSearch() {
      this.form.page = 1;
      this.getList(this.form);
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pagesize = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
    // 改变页面条数
    handleSizeChange2(val) {
      this.form.pagesize = val;
      this.numList(this.form2);
    },
    // 选择页数
    handleCurrentChange2(val) {
      this.form.page = val;
      this.numList(this.form2);
    },
    // 使用范围
    handleSizeChange1(val) {
      this.form1.pagesize = val;
      this.handleUse(this.form1);
    },
    handleCurrentChange1(val) {
      this.form1.page = val;
      this.handleUse(this.form1);
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
  background: transparent;
}
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
</style>